<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" th:href="@{/res/static/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/res/layui/css/layui.css}">
    <script type="text/javascript" th:src="@{/res/layui/layui.js}"></script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>
<!--引入顶部 登录信息页面-->
<div th:replace="/commons/bar::#topLog"></div>

<!--引入顶部 查询收搜框-->
<div th:replace="/commons/bar::#queryHeader"></div>


<div class="content content-nav-base  login-content">
    <!--引入内容的导航页签-->
    <div th:replace="/commons/bar::#navigationTab"></div>
    <div class="login-bg">
        <div class="login-cont w1200">
            <div class="form-box">
                <form class="layui-form" action="">
                    <legend>手机号登录</legend>
                    <div class="layui-form-item">
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline">
                                <i class="layui-icon layui-icon-cellphone iphone-icon"></i>
                                <input type="tel" name="phone" id="phone" lay-verify="required|phone"
                                       placeholder="请输入手机号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline veri-code">
                            <div class="layui-input-inline">
                                <input id="pnum" type="text" name="pnum" lay-verify="required" placeholder="请输入验证码"
                                       autocomplete="off" class="layui-input">
                                <input type="button" class="layui-btn" id="find" value="验证码"/>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item login-btn">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="demo1" id="loginSubmit" onclick="return false">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="ng-promise-box">
        <div class="ng-promise w1200">
            <p class="text">
                <a class="icon1" href="javascript:;">7天无理由退换货</a>
                <a class="icon2" href="javascript:;">满99元全场免邮</a>
                <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
            </p>
        </div>
    </div>
    <div class="mod_help w1200">
        <p>
            <a href="javascript:;">关于我们</a>
            <span>|</span>
            <a href="javascript:;">帮助中心</a>
            <span>|</span>
            <a href="javascript:;">售后服务</a>
            <span>|</span>
            <a href="javascript:;">母婴资讯</a>
            <span>|</span>
            <a href="javascript:;">关于货源</a>
        </p>
        <p class="coty">母婴商城版权所有 &copy; 2012-2020</p>
    </div>
</div>
<script type="text/javascript">
    layui.config({
        base: '/res/static/js/util' //你存放新模块的目录，注意，不是layui的模块目录
    }).use(['jquery', 'form'], function () {
        var $ = layui.$, form = layui.form;

//账号登录
        $("#loginSubmit").click(function () {
            if (!/^1\d{10}$/.test($("#phone").val())) {
                layer.msg("请输入正确的手机号");
                return false;
            }
            if (!/^\d{6}$/.test($("#pnum").val())) {
                layer.msg("验证码不合法");
                return false;
            }
            $.ajax({
                type: "post",
                url: "/user/login",
                data:{
                    phone:$("#phone").val(),
                    verificationCode:$("#pnum").val()
                },
                dataType: "json",//返回的
                success: function (data) {

                    if (data.result) {
                        window.location ="/product/index.html";
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
            return false;
        });


    //发送短信验证码
    $("#find").click(function () {
        if (!/^1\d{10}$/.test($("#phone").val())) {
            layer.msg("请输入正确的手机号");
            return false;
        }
        var obj = this;
        $.ajax({
            type: "get",
            url: "/user/sendSMS/" + $("#phone").val(),

            dataType: "json",//返回的
            success: function (data) {

                if (data.result) {
                    $("#find").addClass(" layui-btn-disabled");
                    $('#find').attr('disabled', "true");
                    settime(obj);
                    $("#msg").text(data.msg);
                    layer.msg(data.msg);
                } else {
                    layer.msg(data.msg);
                }
            },
            error: function (msg) {
                console.log(msg);
            }
        });
    })
    var countdown = 60;
    function settime(obj) {
        if (countdown == 0) {
            obj.removeAttribute("disabled");
            obj.classList.remove("layui-btn-disabled")
            obj.value = "获取验证码";
            countdown = 60;
            return;
        } else {

            obj.value = "重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function () {
                settime(obj)
            }
            , 1000)
    }
    })
</script>

</body>
</html>